<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          客户编号：
          <a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray" 
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          仓库名称：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.sysStoreHouseId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in warehouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          销售名称：
          <a-select
            option-filter-prop="children"
            style="width: 60%"
            show-search
            :filter-option="filterOption"
            v-model="searchData.speId"
          >
            <a-select-option
              :value="item.id"
              v-for="item in salesArray"
              :key="item.id"
            >
              {{ item.emailAccount }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            币种：
            <a-select
              style="width: 60%"
              show-search
              option-filter-prop="children"
              v-model="searchData.settlementCurrencyName"
              allowClear
            >
              <a-select-option
                :name="item.exchangeCurrency"
                :value="item.exchangeCurrency"
                v-for="item in settlementCurrencys"
                :key="item.sysCurrencyId"
              >
                {{ item.exchangeCurrency }}
              </a-select-option>
            </a-select>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          日期选择：<a-range-picker
            v-model="searchDate"
            @change="changeDate"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a></div
        ></a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <div style="margin: 20px 0">
      <a-button
        :loading="downloadLoding"
        @click="downloadFile"
        type="primary"
        style="
          background: #66b1ff;
          color: #fff;
          border: none;
          margin-left: 20px;
        "
      >
        导出<a-icon type="download" />
      </a-button>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        :scroll="{ x: 1500 }"
        :columns="columns"
        :data-source="tableList"
        :pagination="false"
      >
        <span slot="issuingVolume" slot-scope="text, record">
          <a
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="details(record, 'issuingVolume')"
            >{{ record.issuingVolume }}
          </a>
        </span>
        <span slot="transferVolume" slot-scope="text, record">
          <a
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="details(record, 'transferVolume')"
            >{{ record.transferVolume }}
          </a>
        </span>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
  </div>
</template>

<script>
import { logi_getCurrency } from "@/apis/system/setManage/setWarehouse";
import { acc_getSpeInfo } from "@/apis/system/acc/acc";
import {
  marketingClientData,
  marketingClientData_outEx,
} from "@/apis/system/marketing/curtomerData";
import { mapState } from "vuex";
import req from "@/utils/req";
export default {
  mounted() {
    this.getTableList();
    this.getSpeInfo();
    this.getCurrency();
  },
  data() {
    return {
      downloadLoding: false,
      searchDate: null,
      spinning: false,
      total: 1,
      expand: false,
      tableList: [],
      searchData: {
        size: 10,
        current: 1,
        speId: null,
        tenantId: null,
        sysStoreHouseId: null,
        startDate: null,
        endtDate: null,
        time: 1,
        settlementCurrencyName: null,
      },
      //销售列表
      salesArray: [],
      //币种列表
      settlementCurrencys: [],
    };
  },
  methods: {
    //导出客户数据
    async downloadFile() {
      this.downloadLoding = true;
      let res = await marketingClientData_outEx(this.searchData);
      req.exportFile("客户数据", res);
      setTimeout(() => {
        this.downloadLoding = false;
      }, 1000);
    },
    //搜素时间改变
    changeDate(date, dateString) {
      this.searchData.startDate = dateString[0];
      this.searchData.endtDate = dateString[1];
    },
    //获取现有销售列表
    async getSpeInfo() {
      let { code, responseBody } = await acc_getSpeInfo();
      if (code === "200") {
        this.salesArray = responseBody;
      }
    },
    // 详情页面
    details(record, type) {
      this.$emit("customerInfo", record, type, this.searchData);
    },
    //获取表格数据
    async getTableList() {
      this.spinning = true;
      if ((this.searchData.endtDate ?? "") != "") {
        this.searchData.time = null;
      } else {
        this.searchData.time = 1;
      }
      let { code, responseBody } = await marketingClientData(this.searchData);
      if (code == "200") {
        this.tableList = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //重置按钮
    resetSearch() {
      this.searchData.speId = null;
      this.searchData.tenantId = null;
      this.searchData.sysStoreHouseId = null;
      this.searchData.startDate = null;
      this.searchData.endtDate = null;
      this.searchData.settlementCurrencyName = null;
      this.searchData.time = 1;
      this.searchDate = null;
      this.getTableList();
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTableList();
    },
    //获取币种的接口
    async getCurrency() {
      let res = await logi_getCurrency({ size: 100000, current: 1 });
      if (res.code == "200") {
        this.settlementCurrencys = res.responseBody.records;
      }
    },
  },
  computed: {
    ...mapState(["warehouse", "accArray"]),
    columns() {
      return [
        {
          title: "日期",
          dataIndex: "settlementTime",
          align: "center",
          scopedSlots: { customRender: "settlementTime" },
          width: "10%",
          //  fixed: "left",
        },
        {
          title: "销售",
          dataIndex: "spe",
          align: "center",
          scopedSlots: { customRender: "spe" },
          width: "15%",
        },
        {
          title: "客户编号",
          dataIndex: "tenantId",
          scopedSlots: { customRender: "tenantId" },
          align: "center",
          width: "10%",
        },
        {
          title: "仓库",
          dataIndex: "sysStoreHouseCode",
          scopedSlots: { customRender: "sysStoreHouseCode" },
          align: "center",
          width: "10%",

          // ellipsis: true,
        },
        {
          title: "币种",
          dataIndex: "settlementCurrencyName",
          scopedSlots: { customRender: "settlementCurrencyName" },
          align: "center",
          width: "10%",
        },
        {
          title: "充值金额",
          dataIndex: "cost",
          scopedSlots: { customRender: "cost" },
          align: "center",
          width: "10%",
        },

        {
          title: "消费金额",
          dataIndex: "expense",
          scopedSlots: { customRender: "expense" },
          align: "center",
          width: "10%",
        },
        {
          title: "工单消费",
          dataIndex: "workOrderExpense",
          scopedSlots: { customRender: "workOrderExpense" },
          align: "center",
          width: "10%",
        },
        {
          title: "代发消费",
          dataIndex: "issuingExpense",
          scopedSlots: { customRender: "issuingExpense" },
          align: "center",
          width: "10%",
        },
        {
          title: "转运消费",
          dataIndex: "transferExpense",
          scopedSlots: { customRender: "transferExpense" },
          align: "center",
          width: "10%",
        },

        {
          title: "退件消费  ",
          dataIndex: "retreatExpense",
          scopedSlots: { customRender: "retreatExpense" },
          align: "center",
          width: "10%",
        },
        {
          title: "代发体积(m³)",
          dataIndex: "issuingVolume",
          scopedSlots: { customRender: "issuingVolume" },
          align: "center",
          width: "14%",
        },
        {
          title: "转运体积(m³)",
          dataIndex: "transferVolume",
          scopedSlots: { customRender: "transferVolume" },
          align: "center",
          width: "14%",
        },
        {
          title: "退件体积(m³)",
          dataIndex: "retreatVolume",
          scopedSlots: { customRender: "retreatVolume" },
          align: "center",
          width: "14%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>